<template>
    <div class="register">
        <div class="reg_logo">
            <div class="warp">
                <img src="@/assets/logo.png" alt="" @click="goHome">
            </div>
        </div>

        <!-- 时间线 -->
        <div class="stepsTree warp">
            <el-steps :active="showReg">
                <el-step title="创建账号"></el-step>
                <el-step title="填写账号信息"></el-step>
                <el-step title="注册成功"></el-step>
            </el-steps>
        </div>
       

        <div class="reg_sel warp" v-show="showReg==1">
            <div class="reg_sel_box">
                <p class="reg_sel_tit reg_padd">请选择要创建的账号角色</p>
                <div class="reg_sel_user centerBox">
                    <p :class="typeBgcJm" @click="typeSelect('1')">竞买方</p>
                    <!-- <p :class="typeBgcWt" @click="typeSelect('2')">委托方</p> -->
                </div>
                <p class="reg_padd">请选择要创建的账号类型</p>
                <div class="reg_sel_user twoBox">
                    <p :class="cardBgcGr" @click="cardTypeSelect('1')">个人</p>
                    <p :class="cardBgcQy" @click="cardTypeSelect('2')">企业</p>
                </div>
                <div class="reg_padd next" @click="showReg=2">下一步</div>
            </div>
        </div>
        <div class="regLogin" v-show="showReg==2">
            <div class="regLogin_box">
                <p class="log_box_p">
                    <span class="direction"></span>
                    <span>{{card_type=='1'?'个人':'企业'}}注册</span>
                </p>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input size="small" v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                        <p class="hint">*支持中文、字母、数字、“-”、“_”的组合，2-20个字符</p>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input size="small" type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" prop="checkPass">
                        <el-input size="small" type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请重复密码"></el-input>
                    </el-form-item>
                    <el-form-item v-if="card_type=='2'" label="机构联系人" prop="contact_name">
                        <el-input size="small" v-model="ruleForm.contact_name" placeholder="请输入机构联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人手机号" prop="mobile">
                        <el-input size="small" v-model="ruleForm.mobile" placeholder="请输入联系人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                            <el-input size="small" placeholder="请输入验证码" v-model="ruleForm.code">
                                <el-button slot="append" :disabled="disabled" @click="sendCode">{{ countDown }}</el-button>
                            </el-input>
                    </el-form-item>
                </el-form>
                <div class="log_agree">
                    <div class="log_a_check checkColor">
                        <el-checkbox v-model="checkedArgee" @change="agreeChange">我已阅读并同意</el-checkbox>
                    </div>
                    <div class="agreement">
                        <span @click="memberAgreement">《盟拍网会员注册协议》</span>
                        <span @click="severAgreement">《盟拍网网络拍卖服务协议》</span>
                        <span @click="privacyAgreement">《盟拍网隐私协议》</span>
                    </div>
                    <div class="log_agree_but">
                        <el-button
                        type="danger"
                        style="width:100%;margin-bottom: 10px;height:48px"
                        @click.native.prevent="nowLogin"
                        >立即注册</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="register_suc warp" v-show="showReg==3">
            <div class="in_red_suc">
                <div class="red_blod_w">恭喜您，注册成功！</div>
                <div class="info_in_reg">
                    <div>
                        <span>您的用户名：</span>
                        <span>{{userShow}}</span>
                    </div>
                    <div>
                        <span>您的手机号：</span>
                        <span>{{ophoneShow}}（短信验证码登录可用）</span>
                    </div>
                </div>
                <div class="red_blod_w">如果要参加竞拍，请实名认证</div>
                <div class="btn_register">
                    <el-button type="danger" plain style="width:100%;margin-bottom: 10px;height:48px" @click="goHome">稍后认证</el-button>
                    <el-button type="danger" style="width:100%;margin-bottom: 10px;height:48px" @click="goCardAuthen">立即认证</el-button>
                </div>
            </div>
        </div>

        <div class="l_footer">
            <div class="l_footer_phone">
                <p>热线电话：18731185621</p>
                <p>联系地址：河北省石家庄市新华区民族路77号华强广场A座705</p>
                <p class="l_footer_black">Copyright©盟拍网-河北一盟拍卖有限公司 备案号：冀ICP备2022014737号-1</p>
            </div>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            center
            width="60%">
            <div class="req_dialog_div">
                <p v-html="content"></p>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="agreeClick(title)">同意并继续</el-button>
            </span>
        </el-dialog>



    </div>
</template>
<script>
import {celogon,getCode,helpContent} from '@/api/user'
export default{
    name:'register',
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        var validateUsername=(rule, value, callback)=>{
              if (!value) {
                callback(new Error('请输入用户名'));
                return;
            }
            
            // 正则表达式：支持中文、字母、数字、"-"、"_"
            const usernameRegex = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,20}$/;
            
            if (!usernameRegex.test(value)) {
                callback(new Error('用户名支持中文、字母、数字、"-"、"_"，长度2-20个字符'));
                return;
            }
            
            callback(); // 验证通过
        }
        const validatePhone = (rule, value, callback) => {
            // 判断输入框中是否输入手机号
            if (!value) {
                callback(new Error('手机号不能为空'))
            }
            //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
            if (!/^1[35789]\d{9}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            }
            callback()
        }
        return{
            userShow:'',
            ophoneShow:'',
            type:'1',
            card_type:'2',
            level:'2',
            typeBgcJm:'',
            typeBgcWt:'',
            cardBgcGr:'',
            cardBgcQy:'',
            showReg:1,
            ruleForm:{
                username:'',
                mobile:'',
                code:'',
                password:'',
                checkPass:'',
                contact_name:'',  //当注册人类型为2企业时填写
            },
            rules:{
                username:[{ required: true,validator:validateUsername, trigger: 'blur' }],
                mobile:[
                    { required: true, trigger: 'blur', message: '请输入11位手机号'},
                    { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
                    { required: true, trigger: 'blur', validator: validatePhone}
                ],
                code:[
                    { required: true, trigger: 'blur', message: '请输入6位验证码'},
                    { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
                ],
                password:[{ required: true,validator: validatePass,message: '请输入密码' , trigger: 'blur' }],
                checkPass:[{ required: true,validator: validatePass2, message: '请再次输入密码', trigger: 'blur' }],
                contact_name:[{ required: true, message: '请输入机构联系人' ,trigger: 'blur' }],
            },
            checkedArgee:true,
            title:'',
            dialogVisible: false,
            disabled:false,
            time:0,
            countDown: "获取验证码",
            content:'',
            memberof:true,
            severof:true,
            privacyof:true
        }
    },
    computed:{
    },
    created(){
        this.$emit('public_header', {header:false,footer:false});
        this.typeBgcJm='checked';
        this.cardBgcQy='checked';
    },
    methods:{
        nowLogin(){
             if(this.memberof && this.severof && this.privacyof){
                this.checkedArgee = true;
             }else{
                this.checkedArgee = false;
             }
            
                 //立即注册
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if(this.checkedArgee){
                        var obj = {
                            username:this.ruleForm.username,
                            mobile:this.ruleForm.mobile,
                            code:this.ruleForm.code,
                            password:this.ruleForm.password,
                            contact_name:this.ruleForm.contact_name,
                            type:this.type,
                            card_type:this.card_type,
                            level:this.level
                        }
                        celogon(obj).then(res =>{
                            let obj = {username:this.ruleForm.username,password:this.ruleForm.password}
                            //账号密码登录
                                // console.log('zhixing')
                                this.$store.dispatch('bidderLogin', obj).then(() => {
                                    this.showReg = 3;
                                    this.userShow=this.ruleForm.username;
                                    this.ophoneShow=this.ruleForm.mobile;
                                    // this.loading = false
                                }).catch(() => {
                                    // this.loading = false
                                })
                            
                        }).catch(err =>{
                            if(err.code == 40001){
                                this.$message({
                                    message: err.msg,
                                    type: 'error'
                                })
                            }
                        })
                    }else{
                    this.$message({
                        message: '请勾选"我已阅读并同意"',
                        type: 'warning'
                    })
                    }
                }else {
                    return false
                }
            })
           
           
        },
        sendCode(){
            if (!this.ruleForm.mobile) {
                //号码校验不通过
                this.$message({
                message: '请输入手机号',
                type:'warning',
                });
                //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
            } else if (!/1[35789]\d{9}/.test(this.ruleForm.mobile)) {
                // 失去焦点后自动触发校验手机号规则
            } else {
                this.time = 60;
                this.disabled = true;
                //调用倒计时方法
                this.timer();
                getCode({mobile:this.ruleForm.mobile}).then(res=>{
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                })
            }

        },
        timer() {
            if (this.time > 0) {
                this.time--;
                this.countDown = "已发送" + this.time + 's';
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.countDown = "获取验证码";
                this.disabled = false;
            }
        },
        typeSelect(i){
            this.type=i;
            if(i == '1'){
                this.typeBgcJm='checked';
                this.typeBgcWt='';
            }else{
                this.typeBgcJm='';
                this.typeBgcWt='checked';
            }
        },
        cardTypeSelect(i){
            this.level=i;
            this.card_type=i;
            if(i == '1'){
                this.cardBgcGr='checked';
                this.cardBgcQy='';
            }else{
                this.cardBgcGr='';
                this.cardBgcQy='checked';
            }
        },
        memberAgreement(){
            this.dialogVisible = true;
            this.title='盟拍网会员注册协议';
            helpContent({help_id:'1'}).then(res =>{
                this.content = res.data.content;
            });
        },
        severAgreement(){
            this.dialogVisible = true;
            this.title='盟拍网网络拍卖服务协议';
            helpContent({help_id:'2'}).then(res =>{
                this.content = res.data.content;
            });
        },
        privacyAgreement(){
            this.dialogVisible = true;
            this.title='盟拍网隐私协议'
            helpContent({help_id:'3'}).then(res =>{
                this.content = res.data.content;
            });
        },
        goHome(){
            this.$router.push({path:'/home'});
        },
        agreeChange(val){  
            if(val){
                this.memberof=true;
                this.severof=true;
                this.privacyof=true;
            }else{
                this.memberof=false;
                this.severof=false;
                this.privacyof=false;
            }                                                      
        },
        agreeClick(title){
            
            switch(title){
                case '盟拍网会员注册协议':
                this.memberof=true;
                break;
                case '盟拍网网络拍卖服务协议':
                this.severof=true;
                break;
                default:
                this.privacyof=true;
                break; 

            }
            this.dialogVisible = false;
            if(this.memberof && this.severof && this.privacyof){
                this.checkedArgee = true;
            }
        },
        //点击立即认证
        goCardAuthen(){
            this.$router.push({path:'/userCenter/userInfo',query: {index:'1'}});
        },
    }
}
</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.register{
    height: 100%;
    width: 100%;
    position: absolute;
    .stepsTree{
        height: 10%;
        display: flex;
        justify-content: center;
        /deep/.el-steps{
            width: 900px;
            padding-top: 20px;
            .el-step__head.is-finish {
                color: #F56C6C;
                border-color: #F56C6C;
            }
            .el-step__title.is-finish {
                color: #F56C6C;
            }
        }
    }
    .reg_logo{
        height: 7%;
        min-height: 70px;
        background: #fff;
        display: flex;
        align-items: center;
        img{
            height: 50px;
        }
        // border-bottom: 1px solid @base-color;
    }
    .reg_sel{
        height: 71%;
        display: flex;
        justify-content: center;
        align-items: center;
        .reg_sel_box{
            text-align: center;
            width: 380px;
            height: 350px;
            display: flex;
            flex-direction:column;
            justify-content: space-between;
            // background-color: #fff;
            .centerBox{
                display: flex;
                justify-content: center;
            }
            .twoBox{
                display: flex;
                justify-content: space-between;
            }
            .reg_sel_user{
                
                p{
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    border:1px solid #fbc4c4;
                    border-radius: 4px;
                    background-color: #fef0f0;
                    color: #F56C6C;
                }
               
                .checked{
                    color: #fff;
                    background: #F56C6C;
                }
            }
            .next{
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 4px;
                color: #fff;
                background: #F56C6C;
            }
            
        }
    }
    .regLogin{
        height: 71%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 460px;
        .regLogin_box{
            width: 550px;
            height: 550px;
            .demo-ruleForm{
                width: 440px;
                margin: auto;
                .el-form-item{
                    margin-bottom: 18px;
                }
                /deep/.el-form-item__label{
                    width: 120px !important;
                }
                /deep/.el-form-item__content{
                    margin-left: 120px !important;
                }
                .hint{
                    font-size: 12px;
                    color: #999;
                }
            }
            .log_agree{
                
                .agreement{
                    font-size: 12px;
                    color: #F56C6C;
                    margin-top: 6px;
                    text-align: center;
                    span{
                        cursor: pointer;
                    }
                }
                .log_a_check{
                    width: 400px; 
                    margin: auto;
                    margin-top: 10px;
                }
                .log_agree_but{
                    width: 400px;
                    margin: auto;
                    margin-top: 10px;
                    
                    .el-button{
                        font-size: 18px;
                    }
                }

            }
            .log_box_p{
                // text-align: center;
                width: 400px;
                margin: auto;
                margin-bottom: 40px;
                font-size: 22px;
                color: #373839;
                font-weight: bold;
                // vertical-align:middle;
                .direction{
                    width: 4px;
                    background-color: #F56C6C;
                    height: 25px;
                    margin-right: 10px;
                }
                span{
                    letter-spacing:4px;
                    display: inline-block;
                    vertical-align:middle;
                }
            }
        }
    }
    .register_suc{
        height: 71%;
        display: flex;
        justify-content: center;
        align-items: center;
        .in_red_suc{
            font-family: "微软雅黑";
            text-align: center;
            .red_blod_w{
                font-size: 16px;
                font-weight: 600;
                color: #F56C6C;
                margin-bottom: 50px;
            }
            .info_in_reg{
                font-size: 14px;
                color: #606266;
                margin-bottom: 50px;
                div{
                    margin-bottom: 8px;
                }
            }
            .btn_register{
                display: flex;
                /deep/.el-button{
                    padding: 14px 40px;
                    font-size: 16px;
                    margin-right: 20px;
                }
            }
        }
    }
    .l_footer{
        height: 10%;
        color: #999;
        background-color: #fff;
        min-height: 93px;
        .l_footer_phone{
            display: flex;
            flex-direction:column;
            align-items: center;
            justify-content: space-between;
            p{
                padding-top: 10px;
            }
        }
    }
    /deep/.el-dialog__header{
        background-color: #F56C6C;
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog__headerbtn .el-dialog__close{
            color: #fff;
        }
    }
    .dialog-footer{
        /deep/.el-button{
            padding: 14px 40px;
            font-size: 18px;
        }
    }
    .req_dialog_div{
        height: 400px;
        overflow-y: scroll;
    }
    .req_dialog_div::-webkit-scrollbar{
        display: none;
    }

}
</style>